<template>
  <div class="Login">
    <van-nav-bar left-arrow @click-right="back" class="login-top">
      <template #left>
        <div class="logo iconfont">&#xe50c;</div>
        <div class="logotext">Luckin Coffee</div>
      </template>
      <template #right>
        <div class="back" @click="gomain">立即体验</div>
      </template>
    </van-nav-bar>
    <div class="login-text">
      <div class="welcome">欢迎回来!</div>
      <div class="english">Please login to your accounts</div>
    </div>
    <div class="login-input">
      <van-form @submit="onSubmit">
        <!-- 登录表单 -->
        <van-field
          v-model="phone"
          name="phone"
          label="用户名"
          placeholder="用户名"
          :rules="UserRules"
        />
        <van-field
          :type="isPassword ? 'password' : 'text'"
          v-model="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="PasswordRules"
          :right-icon="isPassword ? 'closed-eye' : 'browsing-history'"
          @click-right-icon="isPassword = !isPassword"
        />

        <div class="pass clearfix">
          <div class="fr" @click="forget">忘记密码?</div>
        </div>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
          <van-button
            type="default"
            class="register"
            @click.prevent="show = true"
            >注册</van-button
          >
        </div>
      </van-form>
      <!-- 注册表单 -->
      <van-popup
        class="toregister"
        v-model="show"
        position="bottom"
        round
        overlay-class="mask"
        :style="{ height: '30%' }"
      >
        <van-form @submit="Reaisteruser">
          <div class="logintrue">
            <div class="comeback">
              <van-icon name="cross" @click="show = false" />
            </div>
            <div class="nametop">注册</div>
          </div>
          <van-field
            name="phone"
            label="手机号"
            placeholder="手机号 中国(+86)"
            :rules="UserRules"
            v-model="userRegister.phone"
          />
          <van-field
            v-model="userRegister.nickName"
            name="nickName"
            label="昵称"
            placeholder="昵称"
            :rules="usernamerules"
          />
          <van-field
            name="password"
            :rules="PasswordRules"
            label="密码"
            v-model="userRegister.password"
            @click-right-icon="isRegister = !isRegister"
            :type="isRegister ? 'password' : 'text'"
            placeholder="密码"
            :right-icon="isRegister ? 'closed-eye' : 'browsing-history'"
          />
          <div style="margin: 16px">
            <van-button type="default" class="register">注册</van-button>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>

<script>
import '../assets/less/login.less'
import { loginAPI, registerAPI } from '@/api/user.js'
import { setToken } from '@/utils/storage'

export default {
  name: 'Login',
  data () {
    //
    return {
      // 登录信息
      phone: '',
      password: '',
      // 登录验证规则
      // 注册信息
      UserRules: [
        {
          required: true,
          message: '手机号格式不正确',
          pattern: /^1[3-9]\d{9}$/
        }
      ],
      PasswordRules: [
        {
          required: true,
          message:
            '请确保密码以字母开头，并包含至少6个（最多16个）字符，字符可以是字母、数字或下划线',
          pattern: /^[A-Za-z]\w{5,15}$/
        }
      ],
      usernamerules: [
        {
          required: true,
          message:
            '用户名应由字母、数字、下划线或中文字符组成，长度在2到10个字符之间。',
          pattern: /^[\w\u4e00-\u9fa5]{2,10}$/
        }
      ],
      userRegister: {
        phone: '',
        nickName: '',
        password: ''
      },
      isPassword: true,
      isRegister: true,
      show: false
    }
  },
  methods: {
    // 调用登录接口登录
    onSubmit (values) {
      loginAPI(values)
        .then(res => {
          this.$toast(res.msg) // 登录成功提醒用户
          if (res.code === 200) {
            setToken(res.token) // 登录成功存储token并跳转到个人中心
            this.$router.push({ name: 'My' })
          }
        })
        .catch(err => {
          console.log('error', err)
        })
    },
    // 调用注册接口注册账号
    Reaisteruser (values) {
      registerAPI(values)
        .then(res => {
          this.$toast(res.msg)
        })
        .catch(err => {
          console.log('err', err) // this.$toast(err.msg)
        })
    },
    // 直接去首页
    gomain () {
      this.$router.push({ name: 'Main' })
    },
    // 返回上一层
    back () {},
    // 忘记密码
    forget () {
      this.$router.push({ name: 'Forgetpassword' })
    }
  }
}
</script>

<style lang="less" scoped>
// @font-face {
//   font-family: '../assets/font/iconfont';
//   src: url('../assets/font/iconfont.eot');
//   src: url('../assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
//     url('../assets/font/iconfont.woff2') format('woff2'),
//     url('../assets/font/iconfont.woff') format('woff'),
//     url('../assets/font/iconfont.ttf') format('truetype'),
//     url('../assets/font/iconfont.svg#iconfont') format('svg');
// }
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 40px;
  font-style: normal;
  color: #0833bc;
  // margin-top: -30px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
